<template>
  <div class="page-container detail-container">
    <el-row :gutter="20">
      <el-col :span="8">订单ID<span class="detail-value">{{detailData.code}}</span></el-col>
      <el-col :span="8">用户名<span class="detail-value">{{detailData.memberNickName}}</span></el-col>
      <el-col :span="8">联系电话<span class="detail-value">{{detailData.memberPhone}}</span></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">产品名称<span class="detail-value">{{detailData.productName}}</span></el-col>
      <el-col :span="8">所属品牌<span class="detail-value">{{detailData.brandName}}</span></el-col>
      <el-col :span="8">销售渠道<span class="detail-value">{{SALE_TYPE[detailData.saleType]}}</span></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">单价<span class="detail-value">{{detailData.amount / detailData.quantity}}</span></el-col>
      <el-col :span="8">优惠金额<span class="detail-value">{{detailData.amount - detailData.paymentAmount}}</span></el-col>
      <el-col :span="8">数量<span class="detail-value">{{detailData.quantity}}</span></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">实际支付金额<span class="detail-value">{{detailData.paymentAmount}}</span></el-col>
      <el-col :span="8">下单时间<span class="detail-value">{{detailData.orderDate | dateFrm}}</span></el-col>
      <el-col :span="8">付款时间<span class="detail-value">{{detailData.paymentDate | dateFrm}}</span></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">支付方式<span class="detail-value">{{payMethod}}</span></el-col>
      <el-col :span="8">状态<span class="detail-value">{{detailData.active ? '已激活' : '未激活'}}</span></el-col>
      <el-col :span="8">第三方流水账号<span class="detail-value">{{detailData.thirdSerialNumber}}</span></el-col>
    </el-row>
    <!-- <el-row :gutter="20">
      <el-col :span="8">备注<span class="detail-value">{{detailData.remark}}</span></el-col>
    </el-row> -->
    <div class="detail-toolbar">
      <el-button size="small" @click="cancel">返回</el-button>
    </div>
  </div>
</template>

<script>
import {ORDER_STATUS, SALE_TYPE, PAYMENT_WAY} from '@/utils/const';
import {privilegeOrderDetail} from '@/api/order' 

export default {
  name: 'EquityOrderDetail',
  props: [],
  data() {
    this.ORDER_STATUS = ORDER_STATUS;
    this.SALE_TYPE = SALE_TYPE;
    return {
      detailData: {
        online: false,
        paymentWay: '',
      }
    }
  },
  computed: {
    payMethod() {
      const {online, paymentWay} = this.detailData
      return online ? '在线支付' : PAYMENT_WAY[paymentWay] || '';
    }
  },
  methods: {
    async requestDetail(id) {
      try {
        const {data} = await privilegeOrderDetail(id)
        this.detailData = data;
      } catch (err) {
        console.log(err);
      }
    },
    cancel() {
      this.$router.go(-1);
    }
  },
  created() {
    if (this.$route.name == 'equityOrderDetail') {
      const {id} = this.$route.params;
     	if(id) {
        this.requestDetail(id)
      } else {
        this.cancel()
      }
    }
  }
}
</script>

<style lang="scss">

</style>